<template>
    <div class="miaosha">
        <div class="aaaaa">
            <span>京东秒杀 &nbsp;</span>
                <van-count-down :time="999999999999">
                    <template #default="timeData">
                        <span class="block">{{ timeData.hours }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.minutes }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.seconds }}</span>
                    </template>
                </van-count-down>
            
        </div>
        <div class="buttom">
            <ul>
                <li v-for="item in hotList" :key="item.proid">
                    <img :src="item.img1">
                    <span>{{ item.category }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script name="jdMiaosha" lang="ts" setup>
import { showToast } from 'vant'
import { getJList} from '../../../mode/goods'
import { onMounted ,ref} from 'vue';
interface HotGoodsInfo{
    img1?:string
    proid?:string
    category?:string
   [key:string]:any
}

interface Respose {
    code : string
    data : Array<HotGoodsInfo>
}
const hotList = ref<Array<HotGoodsInfo>>([])
    onMounted(async ()=>{
    const res = await getJList()
    if((res as unknown as Respose).code !== '200') return
    hotList.value =res.data
    console.log(hotList);
    
})
</script>
<style scoped lang="scss">
.miaosha{
    background-color: white;
    padding: 10px;
    border-radius: 20px;
}
.aaaaa {
    display: flex;
    align-items: center;
}
.buttom{
    height: 100px;
    width: 100%;
    // background-color: red;
    overflow: auto;
    >ul{
        display: flex;
        width: 200%;
        justify-content: space-evenly;
        align-items: center;
        >li{
            >span{
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 10px;
            }
        }
    }
}
img {
    width: 50px;
    height: 70px;
}

span {
    text-align: center;
}


.miaosha {
    width: 90%;
    // background-color: red;
    margin: 0 auto;
    overflow: hidden;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: black;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: red;
    border-radius: 5px;
  }
</style>